import { Table, Space, Image, Button, Switch } from 'antd'
import { useState } from 'react'
import { getProList, getCategoryList, updateFlag } from '../../api/pro'
import { useEffect } from 'react'

const Com = () => {
  const [ cateList, setCateList ] = useState([])
  useEffect(() => {
    getCategoryList().then(res => {
      const arr = []
      res.data.forEach(item => {
        arr.push({
          text: item,
          value: item
        })
      })
      setCateList(arr)
    })
  }, [])

  const columns = [
    {
      align: 'center',
      title: '序号',
      fixed: 'left',
      width: 50,
      render: (text, record, index) => (<span>{ (current-1) * pageSize + index + 1 }</span>)
    },
    {
      align: 'center',
      title: '图片',
      fixed: 'left',
      width: 120,
      dataIndex: 'img1',
      render: (text, record, index) => (<Image src = { text } style={{ width: 80, height: 80 }} />)
    },
    {
      align: 'center',
      title: '名称',
      fixed: 'left',
      width: 150,
      dataIndex: 'proname'
    },
    {
      align: 'center',
      title: '品牌',
      width: 100,
      dataIndex: 'brand'
    },
    {
      align: 'center',
      title: '分类',
      width: 100,
      dataIndex: 'category',
      filters: cateList,
      onFilter: (value, record) => record.category.indexOf(value) === 0,
    },
    {
      align: 'center',
      title: '原价',
      sorter: (a, b) => a.originprice - b.originprice,
      width: 100,
      dataIndex: 'originprice'
    },
    {
      align: 'center',
      title: '折扣',
      sorter: (a, b) => a.discount - b.discount,
      width: 100,
      dataIndex: 'discount'
    },
    {
      align: 'center',
      title: '销量',
      sorter: (a, b) => a.sales - b.sales,
      width: 100,
      dataIndex: 'sales'
    },
    {
      align: 'center',
      title: '是否售卖',
      fixed: 'right',
      width: 50,
      dataIndex: 'issale',
      render: (text, record, index) => {
        return (
          <Switch 
            checked = {text === 1}
            onChange = {(checked) => {
              updateFlag({
                proid: record.proid,
                type: 'issale',
                flag: checked
              }).then(res => {
                getProList().then(res => {
                  setProList(res.data)
                })
              })
            }}
          />
        )
      }
    },
    {
      align: 'center',
      title: '是否秒杀',
      fixed: 'right',
      width: 50,
      dataIndex: 'isseckill',
      render: (text, record, index) => {
        return (
          <Switch 
            checked = {text === 1}
            onChange = {(checked) => {
              updateFlag({
                proid: record.proid,
                type: 'isseckill',
                flag: checked
              }).then(res => {
                getProList().then(res => {
                  setProList(res.data)
                })
              })
            }}
          />
        )
      }
    }
    ,
    {
      align: 'center',
      title: '是否推荐',
      fixed: 'right',
      width: 50,
      dataIndex: 'isrecommend',
      render: (text, record, index) => {
        return (
          <Switch 
            checked = {text === 1}
            onChange = {(checked) => {
              updateFlag({
                proid: record.proid,
                type: 'isrecommend',
                flag: checked
              }).then(res => {
                getProList().then(res => {
                  setProList(res.data)
                })
              })
            }}
          />
        )
      }
    }
    ,
    {
      align: 'center',
      title: '操作',
      fixed: 'right',
      width: 150,
      render: (text, record, index) => (
        <Space>
          <Button type="primary">编辑</Button>
          <Button type="danger">删除</Button>
        </Space>
      )
    }
  ]
  const [proList, setProList] = useState([]) 
  useEffect(() => {
    getProList().then(res => {
      setProList(res.data)
    })
  }, [])
  // 固定头和列
  const [height, setHeight] = useState(0)
  useEffect(() => {
    setHeight(window.innerHeight)
  }, [])
   // 分页器
   const [ current, setCurrent ] = useState(1)
   const [ pageSize, setPageSize ] = useState(10)
  return (
    <Space direction="vertical" style={{ width: '100%'}}>
      <Table
        dataSource = {proList}
        columns = {columns}
        rowKey = "proid"
        scroll={{ x: 1500, y: height - 300 }}
        pagination = {{
          position: ['bottomRight'],
          current,
          pageSize,
          onChange: (page, pageSize) => {
            setCurrent(page)
            setPageSize(pageSize)
          },
          pageSizeOptions: ['5', '10', '15', '20'],
          showQuickJumper: true,
          showTotal: (total) => <span>共有{total}条数据</span>
        }}
      >

      </Table>
    </Space>
  )
}
export default Com